<template>
  <div class="divBox">
    <el-card class="box-card">
      <!-- <zb-parser
        :form-id="formId"
        :is-create="isCreate"
        :edit-data="editData"
        @submit="handlerSubmit"
        @resetForm="resetForm"
        v-if="isShow"
      /> -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="350px"
      >
      <el-form-item label="积分抵用比例(1积分抵多少金额)" prop="priceRatio">
        <el-input-number :min="0" v-model="ruleForm.priceRatio" ></el-input-number>
      </el-form-item>
      <el-form-item label="下单赠送积分比例（实际支付1元赠送多少积分）" prop="pointsRatio">
        <el-input-number :min="0" v-model="ruleForm.pointsRatio" ></el-input-number>
      </el-form-item>
      <el-form-item label="积分冻结时间(天)" prop="holdDay">
        <el-input-number :min="0" v-model="ruleForm.holdDay" ></el-input-number>
      </el-form-item>
      <el-form-item label="积分类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
              <el-radio :label="0" class="radio">有效期</el-radio>
              <el-radio :label="1">永久</el-radio>
              <el-radio :label="2">年度清零</el-radio>
            </el-radio-group>
      </el-form-item>
      <el-form-item label="积分有效时间(天)" prop="holdValidity" v-if="ruleForm.type==0">
        <el-input-number :min="0" v-model="ruleForm.holdValidity" ></el-input-number>
      </el-form-item>
      <el-form-item label="积分支付启用" prop="valid">
         <el-switch
              v-model="ruleForm.valid"
              :active-value="true"
              :inactive-value="false"
              active-text="启用"
              inactive-text="未启用"
            />
      </el-form-item>
      <el-form-item label="积分规则的执行时间段" prop="timer">
        <el-date-picker
              class="selWidth"
              v-model="ruleForm.timer"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              size="small"
              type="daterange"
              placement="bottom-end"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="onchangeTime"
            />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
      </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import zbParser from "@/components/FormGenerator/components/parser/ZBParser";
import { configSaveForm, configInfo,configjifenup,getupjifen } from "@/api/systemConfig.js";
import { Debounce } from "@/utils/validate";
export default {
  name: "integralconfig",
  components: { zbParser },
  data() {
    return {
      isShow: false,
      isCreate: 0,
      editData: {},
      formId: 109,
      ruleForm:{
        pointsRatio:0,
        priceRatio:0,
        holdDay:0,
        valid:false,
        type:0,
        holdValidity:null,//有效期
        timer:[],
        startTime:'',
        endTime:'',
      },
      rules:{
        pointsRatio: [{ required: true, message: "请输入积分抵用比例", trigger: "blur" }],
        priceRatio: [{ required: true, message: "请输入下单赠送积分比例", trigger: "blur" }],
        holdDay: [{ required: true, message: "请输入积分冻结时间", trigger: "blur" }],
        holdValidity: [{ required: true, message: "请输入积分有效期", trigger: "blur" }],
        type: [{ required: true, message: "请选择积分类型", trigger: "change" }],
        valid: [{ required: true, message: "请选择是否积分支付", trigger: "change" }],
        timer: [{ required: true, message: "请选择积分执行时间段", trigger: "change" }],
      },
    };
  },
  mounted() {
    // this.getFormInfo();
    this.getInfo()
  },
  methods: {
    //获取积分配置
    getInfo(){
      configjifenup().then(res=>{
        console.log('res',res)
        this.ruleForm={
          pointsRatio:res.pointsRatio,
        priceRatio:res.priceRatio,
        holdDay:res.holdDay,
        valid:res.valid,
        type:res.type ? res.type=='永久' ? 1 : res.type=='有效期' ? 0 : 2 : 0 ,
        holdValidity:res.holdValidity,//有效期
        timer:[res.startTime,res.endTime],
        startTime:res.startTime,
        endTime:res.endTime,
        }
      })
    },
    //时间选择
    onchangeTime(){
      this.ruleForm.startTime=this.ruleForm.timer ? this.ruleForm.timer[0] : ''
      this.ruleForm.endTime=this.ruleForm.timer ? this.ruleForm.timer[1] : ''
    },
    //提交
    submit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
          console.log(this.ruleForm)
          getupjifen(this.ruleForm).then(res=>{
            this.$message.success('修改成功')
            this.getInfo()
          })
        }
      })
    },
    resetForm(formValue) {
      this.editData = {};
    },
    handlerSubmit: Debounce(function (data) {
      const tempArr = [];
      for (var key in data) {
        const obj = {};
        obj.name = key;
        obj.title = key;
        obj.value = data[key];
        tempArr.push(obj);
      }
      const _pram = {
        fields: tempArr,
        id: this.formId,
        sort: 0,
        status: true,
      };
      configSaveForm(_pram).then((res) => {
        this.getFormInfo();
        this.$message.success("操作成功");
      });
    }),
    // 获取表单详情
    getFormInfo() {
      configInfo({ id: this.formId }).then((res) => {
        this.isShow = false;
        this.editData = res;
        this.isCreate = 1;
        setTimeout(() => {
          // 让表单重复渲染待编辑数据
          this.isShow = true;
        }, 80);
      });
    },
  },
};
</script>

<style scoped>
</style>
